<template>
  <div class="rules">
    <!--匹配规则集合-->
    <RuleItem ref="ruleItemRef"  v-for="(item, index) in computedConditions" :key="index" :condition="item" @del="handleDelExpress" />
    <div class="rule-item">
      <!--数字及线条-->
      <div class="left-index">
        <!--数字-->
        <span class="num">{{computedConditions.length + 1}}</span>
        <!--线条-->
        <div class="y-line half-btm"></div>
        <div class="x-line"></div>
      </div>
      <div class="add-content">
        <el-button size="small" @click="handleAddExpress()">添加规则</el-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {ref, computed} from 'vue'
import RuleItem from './RuleItem.vue'

const props = defineProps({
  conditions: Array
})

const ruleItemRef = ref()

const computedConditions = computed(() => (props.conditions || []) as any[])


/**
 * 设置外层对象
 */
const handleAddExpress = () => {
  computedConditions.value.push({
    labelMatchExpressions: [{
      key: '',
      operator: '',
      value: ''
    }]
  })
}

const handleDelExpress = (index:number) => {
  computedConditions.value.splice(index, 1)
}


</script>
<style lang="scss" scoped>
.rule-item {
  display: flex;
  min-height: 60px;
  .left-index {
    width: 150px;
    position: relative;
    .num {
      display: block;
      border: solid 1px var(--primary-color);
      text-align: center;
      line-height: 30px;
      width: 30px;
      border-radius: 30px;
      background-color: #fff;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
    }
    .logic {
      display: block;
      border: solid 1px var(--border-color);
      text-align: center;
      line-height: 30px;
      width: 30px;
      background-color: #fff;
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 1;
    }
    .y-line {
      position: absolute;
      left: 15px;
      top: 0;
      width: 1px;
      bottom: 0;
      background-color: #ccc;
      &.half {
        top: 50%;
      }
      &.half-btm {
        bottom: 50%;
      }
    }
    .x-line {
      position: absolute;
      height: 1px;
      width: 130px;
      left: 20px;
      background-color: #ccc;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .add-content {
    display: flex;
    align-items: center;
  }
  .conditions {
    flex: 1;
    padding: 16px;
    border: solid 1px var(--border-color);
    margin-bottom: 16px;
    .cod-op {
      margin-bottom: 8px;
      display: flex;
      .op-left {
        flex: 1;
      }
    }
  }
}
</style>